<template>
  <view class="animate__animated animate__zoomInDown">
    <!-- 使用自定义的搜索组件 -->
    <view class="search-box" style="border-top: 1rpx solid #2afdd6;">
      <my-search @click="gotoSearch" bgcolor="red"></my-search>
      <image src='https://pic.imgdb.cn/item/63de22654757feff33171a00.png' mode="" style="width: 45px; height: 45px;"
        class="'music circle" @click="imghemo"></image>
    </view>
    <!-- 公众号关注组件 -->

    <official-account></official-account>
    <!-- 头部图片容器 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
      indicator-active-color="#ffffff" indicator-color="#000000">
      <swiper-item v-for="(item,i) in swiperlist" :key="i">
        <view class="swiper-item">
          <image :src="item.image_src" mode=""></image>
        </view>
      </swiper-item>
    </swiper>
    <!--  -->

    <!-- 导航栏 -->
    <view class="card">
      <uni-notice-bar show-icon scrollable
        :text="wxextension+'离2024年春节还有:'+countDownDay+'天'+countDownHour+'时'+countDownMinute+'分'+countDownSecond+'秒;欢迎关注微信公众号:璐瑶成鲲;'"
        backgroundColor="transparent" speed='30' color="#fff" style="font-weight: 900;" />
      <view class="nav-list">
        <view class="nav-item" v-for="(item,i) in navlist" :key="i" @click="navclickhandler(item,i)">
          <image :src="item.image_src" mode="" class="nav-img"></image>
          <text>{{item.name}}</text>
        </view>
      </view>
      <view class="Underline"></view>
      <!-- 诱导关注组件 -->
      <follow color="#fff" bodytext="公众号:璐瑶成鲲" text='关注' :url='urlfollowurl'></follow>
    </view>
    <!--   楼层区域-->
    <view class="floor-list">
      <view class="floor-item" id="box">
        <view class="selectedstyle">
          <text class='all' style="text-align: center;">精选</text>
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view id="demo1" v-for="(item,i) in listimg" :key="i" class="scroll-view-item_H" v-if="i<9">
            <image @click="inToSeeImg(item.imageUrl,item.title)" mode="aspectFill" :src="item.imageUrl"
              style="border-radius: 12px;"></image>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 底部广告 -->
    <ad unit-id="adunit-7c5f6fc1ba2fd672" ad-type="video" ad-theme="white" style="margin-top: 8px;"></ad>

    <!--  -->
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  import hanpop from '@/utils/interstitialAd.js'
  export default {
    mixins: [hanpop, badgeMix],
    data() {
      return {
        wxextension: "欢迎光临微信小程序:牛奶小丸子,",
        countDownDay: 0,
        countDownHour: 0,
        countDownMinute: 0,
        countDownSecond: 0,
        swiperlist: [],
        navlist: [],
        wechat: {
          device: "weChat",
          system: "weChat",
          devicePixel: 480,
          homeOpenCount: -1,
          type: "WALLPAPER_INDEX",
          region: "CN"
        },
        listimg: [],
        checked: false,
        coverImgUrl: '', ////////
        title: '',
        singer: '',
        epname: '',
        currentTime: 0,
        duration: 0,
        value: 0,
        now: '00:00',
        urlfollowurl: 'https://pic.imgdb.cn/item/63f3bddff144a0100762820b.jpg',
        url:'https://mp.weixin.qq.com/s?__biz=MzAwODM0NDM0Mw==&mid=2247494315&idx=1&sn=30f3683392484d86c320e28fddca5a57&chksm=9b72ecd3ac0565c5f611e314222d78a3a5605ebe5a85d3477c4c382a3203a5db83664ac0b43b#rd',
        developobj:{
          finderUserName: 'sphi9Jmeiag77Ov',
          feedId: 'export/UzFfAgtgekIEAQAAAAAAPC8Fr6Td5AAAAAstQy6ubaLX4KHWvLEZgBPEnIJ4ODxifY2BzNPgMJp7vw-Bz6r740vYzPLfzQG4',
        }
      }
    },
    onLoad() {
      if (this.listimg.length == 0) {
        this.goodslistimg()
      }
      this.getswiperlist(), this.getNavList()
    },
    methods: {
      async getswiperlist() {
        // const {data:res}=await uni.$http.get('/api/public/v1/home/swiperdata')
        // if(res.meta.status!==200){
        // return uni.$showMsg()
        // }
        var res = {
          message: [{
            image_src: "https://pic.imgdb.cn/item/63f33eb5f144a0100789cfbf.jpg"
          }, {
            image_src: "https://pic.imgdb.cn/item/63f33eb6f144a0100789d01c.jpg"
          }, {
            image_src: "https://pic.imgdb.cn/item/63f33eb6f144a0100789cff3.jpg"
          }, {
            image_src: "https://pic.imgdb.cn/item/63d4f782face21e9ef155ff2.jpg"
          }, {
            image_src: "https://pic.imgdb.cn/item/63d4f782face21e9ef155fd8.jpg"
          }, {
            image_src: "https://pic.imgdb.cn/item/63f33eb5f144a0100789cf80.jpg"
          }, ]
        }
        this.swiperlist = res.message
      },
      async getNavList() {
        // const{data:res}= await uni.$http.get('/api/public/v1/home/catitems')
        // if(res.meta.status!==200) return uni.$showMsg()
        var res = {
          message: [{
            image_src: "https://pic.imgdb.cn/item/63d92683e90d1c0098a97921.png",
            name: '传送门',
            navigator_url: "/pages/category/main",
            open_type: "switchTab"
          }, {
            image_src: "https://pic.imgdb.cn/item/63d92767e90d1c0098b45065.png",
            name: '王欣宇',
            navigator_url: "/pages/category/main",
            open_type: "switchTab"
          }, {
            image_src: "https://pic.imgdb.cn/item/63d9279fe90d1c0098b70596.png",
            name: '开发者视频号',
            navigator_url: "/pages/category/main",
            open_type: "switchTab"
          }, {
            image_src: "https://pic.imgdb.cn/item/63d927d7e90d1c0098b9c139.png",
            name: '公众号精选',
            navigator_url: "/pages/category/main",
            open_type: "switchTab"
          }, ]
        }
        this.navlist = res.message
      },
      // 点击进行分类页面
      async navclickhandler(item, i) {
        if (item.name === '传送门') {
          uni.navigateTo({
            url: '/subpkg/goods-lyck/goods-lyck?src=' + encodeURIComponent(JSON.stringify(this.url))
          })
        } else if (item.name === '王欣宇') {
          uni.navigateTo({
            url: '/subpkg/goods-video/goods-video'
          });
        } else if (item.name === '开发者视频号') {
          const [err, succ] = await uni.openChannelsActivity(this.developobj).catch(err => err)
          if (err.errMsg) {
            uni.$showMsg('出现错误，请稍后重试！')
          }
        } else if (item.name === '公众号精选') {
          uni.navigateTo({
            url: '/subpkg/goods-articlelist/goods-articlelist'
          });
        }
      },
      // 导航栏数据获取
      async goodslistimg() {
        const {
          data: res
        } = await uni.$http.get('/app/v9/uipages/recommend', this.wechat)
        if (res.apiMessage !== "success") return uni.$showMsg()
        var dataimg = res.apiData.cards[0].belowSubjectProducts

        if (dataimg.length) {
          for (var i in dataimg) 'ios' == wx.getSystemInfoSync().platform && (dataimg[i].imageUrl = dataimg[i]
              .imageUrl.replace("/webp/", "/jpeg/")),
            this.listimg.push(dataimg[i]);
        }
      },
      inToSeeImg(item, title) {
        uni.navigateTo({
          url: '/subpkg/goods-img/goods-img?src=' + item + '&title=' + title
        })
      }, //跳转img组件
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      },
      lyckclick(e) {
        uni.navigateTo({
          url: '/subpkg/goods-lyck/goods-lyck?src=' + encodeURIComponent(JSON.stringify(e))
        })
      },
      imghemo() {
        uni.switchTab({
          url: '/pages/my/my'
        })
      },

    },
    // 时间戳
    onReady() {
      var totalSecond = 1707561637 - Date.parse(new Date()) / 1000;
      var interval = setInterval(function() {
        // 秒数
        var second = totalSecond;
        // 天数位
        var day = Math.floor(second / 3600 / 24);
        var dayStr = day.toString();
        if (dayStr.length == 1) dayStr = '0' + dayStr;
        // 小时位
        var hr = Math.floor((second - day * 3600 * 24) / 3600);
        var hrStr = hr.toString();
        if (hrStr.length == 1) hrStr = '0' + hrStr;
        // 分钟位
        var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
        var minStr = min.toString();
        if (minStr.length == 1) minStr = '0' + minStr;
        // 秒位
        var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
        var secStr = sec.toString();
        if (secStr.length == 1) secStr = '0' + secStr;
        this.countDownDay = dayStr,
          this.countDownHour = hrStr,
          this.countDownMinute = minStr,
          this.countDownSecond = secStr,
          totalSecond--;
      }.bind(this), 1000);
    }
  }
</script>

<style lang="scss">
  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 99;
  }

  swiper {
    height: 330rpx;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 11px;
  }

  .swiper-item,
  image {
    width: 100%;
    height: 100%;
  }

  .card {
    background-image: linear-gradient(160deg, #b100ff 20%, #00b3ff 80%);
    border-radius: 12px;
    margin: 0 10px 5px 10px;
    padding: 11px;
    color: white;

    .nav-list {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;

      .nav-item {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        font-size: 23rpx;

        .nav-img {
          width: 80rpx;
          height: 80rpx;
          margin: 0 auto;
          margin-bottom: 3px
        }

      }
    }

    .Underline {
      width: 90%;
      height: 1px;
      background: white;
      margin: 0 auto;
      margin-bottom: 8px
    }

  }



  .selectedstyle {
    background-image: linear-gradient(160deg, #b100ff 20%, #00b3ff 80%);
    width: 95%;
    margin: 0 auto;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
  }

  .selectedstyle .all {
    width: 100%;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    // text-align: center;
    background: -webkit-linear-gradient(left, #0f0, #00f) 0 0 no-repeat; //设置线性渐变
    -webkit-background-size: 160px; //设置背景大小
    -webkit-background-clip: text; //背景被裁剪到文字
    -webkit-text-fill-color: rgba(255, 255, 255, 0.3); //设置文字的填充颜色
    -webkit-animation: shine 3s infinite; //设置动画
  }

  @-webkit-keyframes shine {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 100% 100%;
    }
  }

  // 滑动导航的样式
  .scroll-view_H {
    background-image: linear-gradient(120deg, #00b3ff 20%, #b100ff 80%);
    width: 95%;
    margin: 0 auto;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-bottom: 2px;
  }

  .scroll-view-item_H {
    display: inline-block;
    width: 212rpx;
    height: 350rpx;
    margin: 3px;
  }

  // 音乐
  .music {
    position: absolute;
    top: 5rpx;
    right: 10rpx;
    z-index: 100;
    border-radius: 50%;
  }

  .circle {
    animation: cirlce 25s linear infinite;
  }

  @keyframes cirlce {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(359deg);
    }
  }

  // ////////////////////////////////////////////////////////////////
  @property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
  }

  .floor-list {
    margin-top: 10px;
  }

  .floor-item {
    background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);
    border-radius: 15px;
    box-shadow: 0px 10px 20px 20px rgba(0, 0, 0, 0.17);
    margin: 0 10px;
    padding-top: 9px;
    padding-bottom: 10px;
    background: linear-gradient(0deg, #ff1d74, #e3820c 43%, #c28846);
    background: linear-gradient(var(--rotate), #ff1d74, #e3820c 43%, #c28846);
    animation: bg 2.5s linear infinite;
  }

  @keyframes bg {
    0% {
      --rotate: 0deg;
    }

    100% {
      --rotate: 360deg;
    }
  }
</style>
